<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品列表</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 卡片视图 -->
        <el-card>
            <el-row>
                <el-col>
                    <el-button @click="catelistAdd()">添加分类</el-button>
                </el-col>
            </el-row>
            <!-- 表格 -->
            <el-table
                :data="catelist"
                style="width: 100%"
                row-key="cat_id"
                border
                lazy
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                <el-table-column
                prop="cat_id"
                label="id"
                width="180">
                </el-table-column>
                <el-table-column
                prop="cat_name"
                label="商品类名"
                width="180">
                </el-table-column>
                
                <el-table-column
                prop="cat_lever"
                label="分类级别"
                width="180"
                >
                    <template slot-scope="scope">
                        <el-tag
                        :type="scope.row.cat_lever === '1' ? 'primary' : 'success'"
                        disable-transitions>{{scope.row.cat_lever}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                prop="address"
                label="操作">
                <template slot-scope="scope">
                    <el-button
                    size="mini"
                    @click="catelistEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                    size="mini"
                    type="danger"
                    @click="catelistDelete(scope.$index, scope.row)">删除</el-button>
                </template>
                </el-table-column>
            </el-table>
           
            <!-- 分页 -->
        </el-card>

        <!-- 添加商品分类弹窗视图 -->
        <el-dialog title="添加分类"  width="20%" :visible.sync="addDialog">
            <el-form :model="addform">
                <el-form-item label="分类名称" >
                    <el-input v-model="addform.cat_name" ></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="userAddDialog = false">取 消</el-button>
                <el-button type="primary" @click="addSubmit()">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 编辑商品分类弹窗视图 -->
        <!-- <el-dialog title="编辑用户" :visible.sync="userEditDialog" width="20%">
            <el-form :model="editform"  ref="editform">
                <el-form-item label="用户名" :label-width="formLabelWidth">
                <el-input v-model="editform.username" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="userAddDialog = false">取 消</el-button>
                <el-button type="primary" @click="editDialog()">确 定</el-button>
            </div>
        </el-dialog> -->

    </div>
</template>
<script>
   
    export default {
        data () {
            return {
                
                querInfo: { // 商品分类查询数据条件
                    type: 3,
                    pagenum: 1,
                    pagesize: 5
                },
                
                catelist: [], // 商品分类的数据列表
                
                editDialog: false, // 弹窗开启状态
                addDialog: false,
                
                addform : { //添加分类表单
                    cat_name : null
                },
                
                catelistId: null // 选中分类的数据
            }
        },
        created () {
            this.getCateList()
        },
        
        methods: {
            //获取商品分类数据
            async getCateList () {
                
                const {data: res} = await this.$http.get('admin/goods/categories')

                
                if (res.status !== 200 ) {
                    return this.$message.error('获取商品分类失败')
                }
                this.catelist = res.categories
                
            },
            catelistEdit (index, row) {
                this.editDialog = true ;
                this.catelistId = row._id
            },

            //添加商品分类
            catelistAdd () {
                this.addDialog = true ;
            },
            //添加分类请求
            async addSubmit () {
                
                const that = this;
                let cat_id =  that.catelist.length + 1 ,
                    cat_name = that.addform.cat_name;
                that.$http.post ("admin/goods/categoriesAdd", {"cat_id": cat_id , "cat_name" : cat_name , "cat_lever" : "1" ,"cat_pid" : 0}).then ((res) => {
                    console.log(res.data)
                    let type = "success"
                    if (res.data.status !== 200) {
                        // return that.$message ({
                        //     type: "error",
                        //     messagfe: res.data.msg
                        // })
                        type = "error"

                    }
                    console.log(type)
                    that.$message ({
                        type: type,
                        message: res.data.msg
                    });
                    that.getCateList ();
                })
                
            },
            
            // 删除分类
            async catelistDelete(index, row) {
                const that = this;
                that.$confirm ("此操作将永久删除该商品分类, 是否继续?", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                    })
                    .then( () => {
                        that.$http.post ("admin/goods/categoriesDelete", { id: row._id }).then((res) =>{
                            if (res.data.status !== 200){
                            return that.$message ({
                                type: "error",
                                message: "删除失败"
                            });
                            } 
                            that.$message ({
                            type: " success",
                            message: "删除成功!"
                            });
                            that.getCateList ();
                        })
                    })
                    .catch(() => {
                        that.$message ({
                            type: "info",
                            message: "已取消删除"
                        });
                    });
            }
        }
    }
</script>